<script lang="ts" setup>
	//弃用页面
	import { ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	let router = useRouter()
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	let inputValue = ref('')
	let radiovalue = ref('')
	let radioList = ref([{
		name: '支付宝',
	},
	{
		name: '微信',
	},
	])
</script>
<template>
	<view class="addressBox c-flex-center-start" >
		<text style="margin-bottom: 15rpx;">小美女 15966545852</text>
		<view class="r-flex-between-center">
			<text>山东省潍坊市青岛区黄岛区山东省潍坊市青岛区黄岛区山东省潍坊市青岛区黄岛区</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
	<view class="goodsBox">
		<view class="goodsBusiness r-flex-between-center">
			<view class="gbL r-flex-center-center">
				<image src="../../../static/logo.png" mode=""></image>
				<text>xxx好好的店铺</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<text>共两件</text>
		</view>
		<view class="goodsInfo r-flex-start-center">
			<view class="gil">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="gic c-flex-start-start">
				<text class="u-line-2">高级为u第高级为高级为高级为高级为高级为高级为高级为</text>
				<text>规格：默认</text>
			</view>
			<view class="gir c-flex-center-end">
				<text>￥58</text>
				<text>*1</text>
			</view>
		</view>
		<view class="goodsInfo r-flex-start-center">
			<view class="gil">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="gic c-flex-start-start">
				<text class="u-line-2">高级为u第高级为高级为高级为高级为高级为高级为高级为</text>
				<text>规格：默认</text>
			</view>
			<view class="gir c-flex-center-end">
				<text>￥58</text>
				<text>*1</text>
			</view>
		</view>
	</view>
	<view class="labelBox r-flex-between-center">
		<text>优惠券</text>
		<view class="r-flex-center-center">
			<text>暂无可用</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
	<view class="labelBox r-flex-between-center">
		<text>商品合计</text>
		<text>￥188</text>
	</view>
	<view class="labelBox r-flex-between-center">
		<text>运费</text>
		<text>￥10</text>
	</view>
	<view class="labelBox r-flex-between-center">
		<text>押金</text>
		<text>￥10000</text>
	</view>
	<view class="labelBox r-flex-between-center">
		<text>订单备注</text>
		<view class="inputBox">
			<u--input placeholder="填写备注" border="none" v-model="inputValue"></u--input>
		</view>
	</view>
	<view class="payWay">
		<u-radio-group v-model="radiovalue" placement="column">
			<view class="r-flex-between-center pwItem" v-for="(item, index) in radioList" :key="index">
				<view class="r-flex-center-center">
					<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../../static/logo.png"
						mode=""></image>
					<text>{{ item.name }}</text>
				</view>
				<u-radio :customStyle="{marginBottom: '8px'}" :name="item.name">
				</u-radio>
			</view>
		</u-radio-group>
	</view>
	<view class="fixedBox r-flex-between-center">
		<view class="">
			<text>合计：</text>
			<text>￥199.99</text>
		</view>
		<view class="sub">
			提交订单
		</view>
	</view>
</template>
<style lang="scss">
	.addressBox {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;
		// height: 150rpx;
		border-bottom: 1rpx solid #000;
	}

	.goodsBox {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;

		.goodsBusiness {
			.gbL {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.goodsInfo {
			margin-top: 20rpx;
			border-bottom: 1rpx solid #000;
			padding: 20rpx 0 40rpx;

			.gil {
				image {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
				}
			}

			.gic {
				width: 420rpx;
			}

			.gir {
				width: 100rpx;
			}
		}
	}

	.labelBox {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;
		border: 1rpx solid #000;

		.inputBox {
			width: 200rpx;
		}
	}

	.payWay {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;

		.pwItem {
			height: 100rpx;
		}
	}

	.fixedBox {
		width: calc(100% - 20rpx);
		height: 90rpx;
		border-top: 1rpx solid #000;
		padding: 0rpx 0rpx 0 20rpx;
		position: fixed;
		bottom: 0;

		.sub {
			height: 100%;
			width: 200rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: #e7e7e7;
		}
	}
</style>